<template>
  <div class="login">
    <div class="logo"></div>
    <div class="loginContainer">
      <div class="loginLeft">
        <div class="leftBg"></div>
      </div>
      <div class="loginRight">
        <div class="loginTitle">邵东市寄递物流治安管理系统</div>
        <div class="loginInput">
          <zy-input v-model="user_name" ref="user_name" autocomplete="off" suffix-icon="el-icon-user"
                    placeholder="请输入用户名"></zy-input>
        </div>
        <div class="loginInput">
          <zy-input type="password" placeholder="请输入密码" v-model.trim="password" ref="password"
                    suffix-icon="el-icon-lock" show-password></zy-input>
        </div>
        <div class="loginBtn">
          <zy-button class="btn" type="primary" @click="login_into">登录</zy-button>
        </div>
      </div>
      <div class="webRecord">网站备案/许可证号： 湘ICP备18001686号-1</div>
    </div>
  </div>
</template>


<script>

	import {mapGetters, mapMutations} from "vuex";

	export default {
		name: "login",
		data() {
			return {
				user_name: "",
				password: "",
			};
		},
		computed: {
			...mapGetters(['getAreaList']),
		},
		mounted() {

			localStorage.clear();
			this.getRegionList();
		},
		watch: {},
		methods: {
			...mapMutations(['changeState']),
			login_into() {
				var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
				if (
					userAgent.indexOf("MSIE 8.0") > -1 ||
					userAgent.indexOf("rv:11.0) like Gecko") > -1
				) {
					var r = confirm(
						"系统暂不支持IE，建议使用谷歌浏览器！\n 去官网下载谷歌浏览器。"
					);
					if (r === true) {
						var google = "https://www.google.cn/intl/zh-CN/chrome/";
						window.open(google);
					} else {
						this.login_info();
					}
				} else {
					this.login_info();
				}
			},
			// 组装权限树
			put_auth(menus) {
				let authority = {};
				if (Array.isArray(menus) && menus.length > 0) {
					menus.forEach((v, k) => {
						if (Array.isArray(v.list) && v.list.length > 0) {
							let list_ = v.list || [];
							list_.forEach((v1, k1) => {
								authority[v1.route] = (function (actions) {
									let obj = {};
									actions.forEach(r => {
										return obj[r.action_key] = r.checked;
									});
									return obj;
								})(v1.actions);
							});
						}
					});
					return authority || {};
				}
			},
			login_info() {
				if (!this.user_name) {
					this.$message.error("请填写用户名");
					this.$refs.user_name.focus();
					return;
				}
				if (!this.password) {
					this.$message.error("请填写密码");
					this.$refs.password.focus();
					return;
				}

				let post_data = {
					account: this.user_name,
					password: this.password
				};
				this.$axios.post(this.$api.login, {
					...post_data
				}).then(res => {
					if (res.code === 200) {
						let {token, menus, user_type} = res.data || {};
						this.$message.success(res.msg);
						menus = menus.filter((item, index) => {
							item.list && (item.list = item.list.filter(subItem => {
								if (user_type === 2) {
									subItem.route = '/sorting' + subItem.route;
								} else if (user_type === 4) {
									subItem.route = '/cooperate' + subItem.route;
								}
								item.index = String(index);
								return subItem;
							}));

							return item;
						});
						this.$store.commit("changeState", {
							token: token,
							menuList: menus,
							authority: this.put_auth(menus),
							user_type: user_type
						});
						localStorage.setItem("store", JSON.stringify(this.$store.state));
						console.log(this.$store.state)
						this.$router.replace({path: "/"});
					} else {
						this.$message.error(res.msg);
					}
				}).catch(res => {
					this.$message.error(res.msg || '服务繁忙请稍后再试');
				});
			},
			getRegionList() {
				if (!this.getAreaList.length) {
					this.$axios.post(this.$api.arriveRegionList, {}).then(res => {
						let {code, msg, data} = res;
						if (code == 200) {
							this.changeState({areaList: data})
						} else {
							this.$message.error(msg);
						}
					}).catch(ret => {
						this.$message.error(ret.msg || '服务繁忙，请稍后再试');
					});
				}
			},
		}
	};
</script>

<style scoped lang="less" src="@/style/login/login.less">

</style>
